import React from 'react';
import ReactDOM from 'react-dom';
import 'element-theme-default';
import { Button,Upload} from 'element-react';
import axios from 'axios'

export default class Xiangce extends React.Component{
  constructor(props) {  
    super(props);  
      this.state = {list: [],
      imglist:[],
      imgs:'.jpg',
    };  

  } 
  componentWillMount(){
    console.log(11)
    
    var fileList2=[]
    axios.post('http://localhost:3000/upload/list',{}
      ).then((res)=>{
        console.log(res,222)
        this.setState({
          imglist:res.data.docs
        })
      })
  }
  delete=function(e){
    var _id = e.currentTarget.getAttribute("_id");
    console.log(_id)
     axios.delete(`http://localhost:3000/upload/data/${_id}`).
    then((res)=>{
      this.setState({
        visible: false
     });
     window.location.reload()
   }
    )
  }
    render(){
      const imgli=[]
      if(this.state){
        console.log(this.state.imglist,621)
        for(let i=0;i<this.state.imglist.length;i++){
          imgli.unshift(
            <div className='xiangce col-md-3	col-lg-3' key={i}>
              <a className='delete' onClick={this.delete} href='javascript:void(0)' _id={this.state.imglist[i]._id}>x</a>
              <img className='shangchuan' src={'http://localhost:3000/'+this.state.imglist[i].filename}/>
            </div>
          )
        }
      }
      
        const fileList2 = [];
        return (
            <div className="container">
            <h2>相册</h2>
            <Upload
              className="upload-demo"
              action="http://localhost:3000/upload/filedata"
              onPreview={filedata => this.handlePreview(file)}
              onRemove={(filedata, fileList) => this.handleRemove(filedata, fileList)}
              fileList={fileList2}
              name="avatar"
              listType="picture"
              tip={<div className="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>}
            >
              <Button size="small" type="primary">点击上传</Button>
            </Upload>
            <div className='row'>
              {imgli}
            </div>
            </div>
          )
    }
    handleRemove(filedata, fileList) {
    }
    
    handlePreview(filedata) {
    }
}